<template>
  <div id="gaodeMap">
    <div class="headerTitle">南浔油烟监管平台</div>
    <div ref="chuangti" class="chuangtiStyle">
      <div class="chuangtiTop">
        <div class="compayName">{{ infoWindowData.title }}</div>
      </div>
    </div>
    <!-- 侧边内容 -->
    <div class="sideBox">
      <div class="leftBox1">
        <div class="sideBox_title">餐饮单位</div>
        <div class="leftBox_top">
          餐饮单位总数 <span>{{ this.L1_total }}</span>
        </div>
        <div class="leftBox_numBox">
          <div class="numBox">
            <img
              class="imgCursor"
              src="@/assets/组 3188@1x.png"
              alt=""
              @click="showDanweuDialog('大型餐厅单位')"
            />
            <div class="num" @click="showDanweuDialog('大型餐厅单位')">
              {{ this.L1_large }}
            </div>
            <div class="name">大型</div>
          </div>
          <div class="numBox">
            <img
              class="imgCursor"
              src="@/assets/组 3167@1x.png"
              alt=""
              @click="showDanweuDialog('中型餐厅单位')"
            />
            <div class="num" @click="showDanweuDialog('中型餐厅单位')">
              {{ this.L1_medium }}
            </div>
            <div class="name">中型</div>
          </div>

          <div class="numBox">
            <img
              class="imgCursor"
              src="@/assets/组 3185@1x.png"
              alt=""
              @click="showDanweuDialog('小型餐厅单位')"
            />
            <div class="num" @click="showDanweuDialog('小型餐厅单位')">
              {{ this.L1_small }}
            </div>
            <div class="name">小型</div>
          </div>
        </div>
      </div>
      <div class="leftBox2">
        <div class="sideBox_title">监测设备统计</div>
        <div class="leftBox_top leftBox_top2">
          设备总数 <span>{{ this.equipmentInfoNum.total }}</span>
        </div>
        <div class="leftBox_numBox leftBox_numBox2">
          <div class="numBox">
            <img
              class="imgCursor"
              src="@/assets/组 48155@1x.png"
              alt=""
              @click="showshebeiDialog('设备在线数')"
            />
            <div class="num numColor2" @click="showshebeiDialog('设备在线数')">
              {{ this.equipmentInfoNum.onLine }}
            </div>
            <div class="name name_space">在线数</div>
          </div>
          <div class="numBox">
            <img
              class="imgCursor"
              src="@/assets/组 48156@1x.png"
              alt=""
              @click="showshebeiDialog('设备离线数')"
            />
            <div class="num numColor3" @click="showshebeiDialog('设备离线数')">
              {{ this.equipmentInfoNum.outLine }}
            </div>
            <div class="name name_space">离线数</div>
          </div>
        </div>
      </div>
      <div class="leftBox3">
        <div class="sideBox_title">餐饮单位清洗情况</div>
        <div class="leftBox_top leftBox_top2 leftBox_top3">
          单位总数 <span>{{ cleaningRecordData.total }}</span>
        </div>

        <div id="pieBox"></div>
      </div>
      <div class="rightBox1">
        <div class="sideBox_title">报警统计分析</div>
        <!-- <div class="btnBox">
          <div class="currentBtn">当前</div>
          <div class="historyBtn">历史</div>
        </div> -->
        <div class="img1">
          <img
            class="imgCursor"
            @click="showchaoqiDialog('超期未清洗记录')"
            src="@/assets/组 48177@1x.png"
            alt=""
          />
        </div>
        <div class="img2" @click="openOilDialog">
          <img class="imgCursor" src="@/assets/组 48175@1x.png" alt="" />
        </div>
        <div class="img3">
          <img
            class="imgCursor"
            @click="showchaoqiDialog('违规报警记录')"
            src="@/assets/组 3206@1x.png"
            alt=""
          />
        </div>
        <div class="img4">
          <img
            class="imgCursor"
            @click="showEquipmentOutLine('设备离线记录')"
            src="@/assets/组 48176@1x.png"
            alt=""
          />
        </div>
        <div class="leftBox_numBox leftBox_numBox3">
          <div class="numBox">
            <div
              class="num numColor2 numBottom"
              style="margin-left: 5px"
              @click="showchaoqiDialog('超期未清洗记录')"
            >
              {{ this.WarnStatisticsData.noCleanOverNum }}
            </div>
            <div class="name">超期未清洗报警</div>
          </div>
          <div class="numBox">
            <div
              class="num numColor3 numBottom"
              style="margin-right: 15px"
              @click="openOilDialog"
            >
              {{ this.WarnStatisticsData.smokeNum }}
            </div>
            <div class="name" style="margin-right: 12px">油烟浓度报警</div>
          </div>
        </div>

        <div class="leftBox_numBox leftBox_numBox4">
          <div class="numBox">
            <div
              class="num numColor4 numBottom"
              style="margin-left: 5px"
              @click="showchaoqiDialog('违规报警记录')"
            >
              {{ this.WarnStatisticsData.equipmentWarnNum }}
            </div>
            <div class="name">违规报警数量</div>
          </div>
          <div class="numBox">
            <div
              class="num numColor5 numBottom"
              style="margin-right: 15px"
              @click="showEquipmentOutLine('设备离线记录')"
            >
              {{ this.WarnStatisticsData.equipmentOutLineNum }}
            </div>
            <div class="name" style="margin-right: 10px">设备离线数</div>
          </div>
        </div>
      </div>
      <div class="rightBox2">
        <div class="sideBox_title">临期清洗提醒</div>
        <div class="listBox">
          <div class="listTitel">
            <!-- <div>清洗单位</div> -->
            <div class="titleName">餐饮单位</div>
            <div class="titleName1">计划清洗时间</div>
            <div class="titleName">剩余时间</div>
          </div>
          <div class="listBody">
            <div class="subList" v-for="(item, index) in table" :key="index">
              <!-- <div class="subList_item">{{ item.compay }}</div> -->
              <div class="subList_item">{{ item.name }}</div>
              <div class="subList_item subList_item2">
                {{ item.planCleanDate }}
              </div>
              <div class="subList_item subList_item3">{{ item.day }}天</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <!-- 餐饮单位弹窗 -->
    <div class="canyinDanweiDialogVisible" v-if="showCanyinDialog === true">
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">{{ this.canyinTypeName }}</div>
      <div class="table">
        <el-table
          :data="CanyinTable"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '56px',
            fontSize: '20px',
          }"
          :header-cell-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '56px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#0a1a34',
            color: '#A8D6FF',
            borderBottom: '1px solid #022627',
            height: '52px',
            fontSize: '18px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '52px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="restaurantName"
            label="餐馆名称"
            width="220"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="注册名称"
            width="242"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="address"
            label="地址"
            width="330"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="ownerName"
            label="负责人"
            width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="phoneNumber"
            label="联系方式"
            width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemEquipProblem"
          @current-change="currentCanyinPage"
        />
      </div>
    </div>
    <!-- 检测设备统计弹窗 -->
    <div class="canyinDanweiDialogVisible" v-if="showShebeiDialog === true">
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">{{ this.shebeiTypeName }}</div>
      <div class="table">
        <el-table
          :data="EquipmentTableList"
          style="width: 100%; border: 'none'"
          :span-method="objectSpanMethod"
          :header-row-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '56px',
            fontSize: '20px',
          }"
          :header-cell-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '56px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#0a1a34',
            color: '#A8D6FF',
            borderBottom: '1px solid #022627',
            height: '52px',
            fontSize: '18px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '52px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="companyName"
            label="单位名称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                :style="{ textDecoration: 'underline' }"
                @click="showCompanyDetial(scope.row.companyId)"
              >
                {{ scope.row.companyName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="设备编号"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.code }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="设备名称"
            width="400"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                :style="{ textDecoration: 'underline', textAlign:'center' }"
                @click="showZhexiantu(scope.row)"
              >
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            prop="equipmentStatusName"
            label="状态"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                :style="{
                  color:
                    scope.row.equipmentStatusName === '在线'
                      ? '#0BD983'
                      : '#979797',
                }"
              >
                {{ scope.row.equipmentStatusName }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemEquipProblem"
          @current-change="currentShebeiPage"
        />
      </div>
    </div>
    <!-- 超期未清洗记录 & 违规报警记录-->
    <div class="canyinDanweiDialogVisible" v-if="showChaoqiDialog === true">
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">{{ this.warmTypeName }}</div>
      <div class="table">
        <el-table
          :data="noCleaningRecordOverList"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '56px',
            fontSize: '20px',
          }"
          :header-cell-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '56px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#0a1a34',
            color: '#A8D6FF',
            borderBottom: '1px solid #022627',
            height: '52px',
            fontSize: '18px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '52px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="companyName"
            label="序号"
            width="100"
            type="index"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            v-if="this.warmTypeName === '超期未清洗记录'"
            header-align="center"
            align="center"
            prop="name"
            label="单位名称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                :style="{ textDecoration: 'underline' }"
                @click="showCompanyDetial(scope.row.id)"
              >
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            header-align="center"
            align="center"
            prop="companyName"
            label="单位名称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                :style="{ textDecoration: 'underline' }"
                @click="showCompanyDetial(scope.row.companyId)"
              >
                {{ scope.row.companyName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="this.warmTypeName === '违规报警记录'"
            header-align="center"
            align="center"
            prop="companyName"
            label="设备名称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.equipmentName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="this.warmTypeName === '违规报警记录'"
            header-align="center"
            align="center"
            prop="companyName"
            label="报警内容"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.remark }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-if="this.warmTypeName === '超期未清洗记录'"
            header-align="center"
            align="center"
            prop="day"
            label="超期未清洗时间"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span :style="{ color: '#FF8447' }"> {{ scope.row.day }}天 </span>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            header-align="center"
            align="center"
            prop="warnTime"
            label="违规报警时间"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalNoCleaningRecordOver"
          @current-change="currentOutdateLinePage"
        />
      </div>
    </div>

    <!-- 设备离线记录 & 油烟浓度报记录(暂停) -->
    <div
      class="canyinDanweiDialogVisible"
      v-if="equipmentOutLineTanchuan === true"
    >
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">{{ this.outLineTypeName }}</div>
      <div class="table">
        <el-table
          :data="lixianListTable"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '56px',
            fontSize: '20px',
          }"
          :header-cell-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '56px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#0a1a34',
            color: '#A8D6FF',
            borderBottom: '1px solid #022627',
            height: '52px',
            fontSize: '18px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '52px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="companyName"
            label="序号"
            type="index"
            width="80"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="companyName"
            label="餐饮单位名称"
            width="300"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div
                :style="{ textDecoration: 'underline' }"
                @click="showCompanyDetial(scope.row.companyId)"
              >
                {{ scope.row.companyName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="code"
            label="设备编号"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="离线设备名称"
            width="292"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            prop="updateTime"
            label="离线时间"
            width="300"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemEquipProblem"
          @current-change="currentShebeiPage"
        />
      </div>
    </div>
    <!-- 单位详情弹窗 -->
    <div
      class="canyinDanweiDialogVisible canyinDanweiDialogVisible_zindex"
      v-if="showCompanyDetialDialog === true"
    >
      <div class="closeX">
        <img
          src="@/assets/组 39@1x.png"
          alt=""
          @click="closeCompanyDetialDialog"
        />
      </div>
      <div class="title">单位详情</div>
      <div class="companyDetialTable">
        <div class="box1">
          <div class="subBox">
            <div class="leftIcon1"></div>
            <div class="rightBox">
              <div class="subBoxTitle">单位名称</div>
              <div class="subBoxTitleDetial">
                {{ this.companyDetialTable.name }}
              </div>
            </div>
          </div>
          <div class="subBox">
            <div class="leftIcon1 leftIcon2"></div>
            <div class="rightBox">
              <div class="subBoxTitle">单位地址</div>
              <div class="subBoxTitleDetial">
                {{ this.companyDetialTable.address }}
              </div>
            </div>
          </div>
          <div class="subBox">
            <div class="leftIcon1 leftIcon3"></div>
            <div class="rightBox">
              <div class="subBoxTitle">负责人</div>
              <div class="subBoxTitleDetial">
                {{ this.companyDetialTable.ownerName }}
              </div>
            </div>
          </div>
        </div>
        <div class="box1">
          <div class="subBox subBox2">
            <div class="leftIcon1 leftIcon4"></div>
            <div class="rightBox">
              <div class="subBoxTitle">联系方式</div>
              <div class="subBoxTitleDetial">
                {{ this.companyDetialTable.phoneNumber }}
              </div>
            </div>
          </div>
          <div class="subBox subBox2">
            <div class="leftIcon1 leftIcon5"></div>
            <div class="rightBox">
              <div class="subBoxTitle">清洗时间</div>
              <div class="subBoxTitleDetial">
                {{ this.companyDetialTable.cleanDate }}
              </div>
            </div>
          </div>
          <div class="subBox subBox2">
            <div class="leftIcon1 leftIcon6"></div>
            <div class="rightBox">
              <div class="subBoxTitle">计划清洗时间</div>
              <div class="subBoxTitleDetial">
                {{ this.companyDetialTable.planCleanDate }}
              </div>
            </div>
          </div>
        </div>
        <div class="table">
          <el-table
            :data="companyDetialTable.tableList"
            style="width: 100%; border: 'none'"
            :header-row-style="{
              backgroundColor: '#072b40',
              color: '#fff',
              borderBottom: '1px solid #022627',
              borderRight: '1px solid #022627',
              height: '56px',
              fontSize: '20px',
            }"
            :header-cell-style="{
              backgroundColor: '#072b40',
              color: '#fff',
              borderBottom: '1px solid #022627',
              height: '56px',
              padding: '7px 0',
            }"
            :row-style="{
              backgroundColor: '#0a1a34',
              color: '#A8D6FF',
              borderBottom: '1px solid #022627',
              height: '52px',
              fontSize: '18px',
            }"
            :cell-style="{
              borderBottom: '1px solid #022627',
              height: '52px',
              padding: '7px 0',
            }"
          >
            <el-table-column
              header-align="center"
              align="center"
              prop="name"
              label="设备名称"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div
                  :style="{ textDecoration: 'underline' }"
                  @click="showZhexiantu(scope.row)"
                >
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="equipmentTypeName"
              label="设备类型"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="equipmentStatusName"
              label="设备状态"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span :style="{ color: '#FF8447' }">
                  {{ scope.row.equipmentStatusName }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="closeBoxDiv">
          <div
            class="closeCompanyDetialDialog"
            @click="closeCompanyDetialDialog"
          >
            关闭
          </div>
        </div>
      </div>
    </div>

    <!-- 设备数据折线图 -->
    <div
      class="canyinDanweiDialogVisible canyinDanweiDialogVisible_zindex"
      v-show="showZhexian === true"
    >
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeZhexianlDialog" />
      </div>
      <div class="title">{{ shebeiShishishuju }}</div>
      <div class="companyDetialTable">
        <div class="timeBlock">
          <el-date-picker
            prefix-icon="el-icon-arrow-down"
            v-model="timeValue1"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            style="width: 375px"
            @change="getSensorHistory"
          >
          </el-date-picker>
        </div>
        <div id="echartsBox1"></div>
      </div>
    </div>

    <!-- 正常清洗数 & 超期清洗数  -->
    <div class="canyinDanweiDialogVisible" v-if="showZhengchangDialog === true">
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">
        {{ this.cleanStatus == 1 ? '正常清洗记录' : '超期清洗数记录' }}
      </div>
      <div class="table">
        <el-table
          :data="zhengchangCleaningRecordTable"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '56px',
            fontSize: '20px',
          }"
          :header-cell-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '56px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#0a1a34',
            color: '#A8D6FF',
            borderBottom: '1px solid #022627',
            height: '52px',
            fontSize: '18px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '52px',
            padding: '7px 0',
          }"
        >
          <div v-if="this.cleanStatus == 1">
            <el-table-column
              header-align="center"
              align="center"
              prop="planCleanDate"
              label="清洗截止时间"
              width="592"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="name"
              label="餐饮单位名称"
              width="600"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div
                  :style="{ textDecoration: 'underline' }"
                  @click="showCompanyDetial(scope.row.id)"
                >
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
          </div>
          <div v-if="this.cleanStatus == 2">
            <el-table-column
              header-align="center"
              align="center"
              prop="day"
              label="超期时间"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div :style="{ color: '#FF8447' }">{{ scope.row.day }}天</div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="name"
              label="餐饮单位名称"
              width="600"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div
                  :style="{ textDecoration: 'underline' }"
                  @click="showCompanyDetial(scope.row.id)"
                >
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="planCleanDate"
              label="清洗截止时间"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </div>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalzhengchangCleaningRecordTable"
          @current-change="currentZhengchangCleaningRecord"
        />
      </div>
    </div>

    <div class="multiSelect">
      <div class="leftBOX">
        <div class="selectInp">
          <div v-if="!checkedStreetList.length">请选择中队</div>
          <div class="selectItem" v-if="checkedStreetList.length > 0">
            <div class="street">{{ checkedStreetList[0].name }}</div>
            <div class="errorX" @click="deleteStreetList(0)">X</div>
          </div>
          <div class="selectItem" v-if="checkedStreetList.length > 1">
            <div class="street">{{ checkedStreetList[1].name }}</div>
            <div class="errorX" @click="deleteStreetList(1)">X</div>
          </div>
          <div class="selectItemM" v-if="checkedStreetList.length > 2">
            <div class="streetM">+{{ checkedStreetList.length - 2 }}...</div>
          </div>
          <div class="arrowDown" @click="showLeftBox = !showLeftBox">
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
        <div class="bottomBox">
          <div
            v-for="(item, index) in leftStreetList"
            :key="index"
            class="streetItem"
            @click="chooseStreetList(index)"
          >
            <div :class="['rightBox', { streetItemChecked: item.checked }]">
              <div class="name">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--油烟浓度报警 -->
    <div class="canyinDanweiDialogVisible" v-if="showOilDialog === true">
      <div class="closeX">
        <img src="@/assets/组 39@1x.png" alt="" @click="closeOilDialog" />
      </div>
      <div class="title">油烟浓度报警</div>
      <div class="table">
        <el-table
          :data="oilData"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '56px',
            fontSize: '20px',
          }"
          :header-cell-style="{
            backgroundColor: '#072b40',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '56px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#0a1a34',
            color: '#A8D6FF',
            borderBottom: '1px solid #022627',
            height: '52px',
            fontSize: '18px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '52px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="companyName"
            label="单位名称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.companyName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="equipmentCode"
            label="设备编号"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <!-- <el-table-column
            header-align="center"
            align="center"
            prop="equipmentName"
            label="设备名称"
            :show-overflow-tooltip="true"
          >
          </el-table-column> -->

          <el-table-column
            header-align="center"
            align="center"
            prop="reason"
            label="报警内容"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <div style="color: #ff8447">
                {{ scope.row.reason }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="reason"
            label="报警等级"
            :show-overflow-tooltip="true"
            width="120"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.remark >= 2" style="color: #fc0e26">
                红色报警
              </div>
              <div v-if="scope.row.remark < 2" style="color: #ffa011">
                黄色预警
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="warnTime"
            label="报警时间"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="oilParams.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalOilData"
          @current-change="currentOilChange"
        />
      </div>
    </div>

    <!-- 设备浓度数据折线图 -->
    <div
      class="nongduDialogVisible canyinDanweiDialogVisible_zindex"
      v-show="showNongDuZhexian === true"
    >
      <div class="closeX">
        <img
          src="@/assets/组 39@1x.png"
          alt=""
          @click="closeZhexianlNongDuDialog"
        />
      </div>
      <div class="title">{{ shebeiNongduZhexianTitle }}</div>
      <div class="companyDetialTable">
        <div class="timeBlock">
          <el-date-picker
            prefix-icon="el-icon-arrow-down"
            v-model="timeValueNongDu"
            type="date"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            style="width: 325px"
            @change="getNongDUDate"
          >
          </el-date-picker>
        </div>
        <!-- <div class="outerSec">
          <div class="selectBox">
            {{ shebeiNongduZhexian }}
          </div>
          <div class="bottomSelect">
            <div class="selectBottomItem" @click="chooseSelectType('实时数据')">
              实时数据
            </div>
            <div
              class="selectBottomItem"
              @click="chooseSelectType('2小时数据')"
            >
              2小时数据
            </div>
            <div class="selectBottomItem" @click="chooseSelectType('作业值')">
              作业值
            </div>
          </div>
        </div> -->

        <div id="echartsBox2" v-if="shebeiNongduZhexian !== '作业值'"></div>
        <div ref="echartsBox3" id="echartsBox3" v-else></div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import {
  num,
  pageList,
  equipmentInfoNum,
  equipmentPageList,
  cleaningRecordData,
  warnStatistics,
  cleaningRecordWarn,
  noCleaningRecordOver,
  warnPageList,
  restaurantSprinkle,
  list,
  companyDetail,
  cleaningRecord,
  // realTimeData
  realTimeDataRecord,
  smokeAlarmPageList,
  fiveMinutesGasConcentration,
  twoHoursGasConcentration,
  workingGasConcentration,
} from '@/api/index'
import AMapLoader from '@amap/amap-jsapi-loader'
import Map1 from '@/assets/overall/圆形 75@1x.png'
import Map2 from '@/assets/overall/圆形 73@1x.png'
import Map3 from '@/assets/overall/圆形 74@1x.png'
import { polygonList } from '@/utils/polygon'
export default {
  name: 'indexPage',
  props: {},
  components: {},
  data() {
    return {
      timeValue1: [
        moment().subtract(6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss'),
      ],
      startTime: '',
      endTime: '',
      code: '',
      // 地图
      gaodeMap: null,
      areaChoose: '330503',
      markerData: [],
      infoWindowData: {
        title: '',
      },
      //  end地图
      showChaoqiDialog: false,
      equipmentOutLineTanchuan: false,
      showZhexian: false,
      historyLineMonth: [],
      historyLineValue_temperature: [],
      historyLineValue_temperature2: [],
      historyLineValue_dustMmol: [],
      historyLineValue_lampblackMmol: [],
      historyLineValue_pmMmol: [],
      historyLineValue_equipmentstatus: [],
      WarnStatisticsData: {
        equipmentOutLineNum: '-',
        equipmentWarnNum: '-',
        noCleanOverNum: '-',
        smokeNum: '-',
      },
      cleaningRecordData: {
        normalCleanCount: '-',
        overdueCleanCount: '-',
        total: '-',
      },
      L1_total: '-',
      L1_large: '-',
      L1_medium: '-',
      L1_small: '-',
      equipmentInfoNum: {
        total: '-',
        onLine: '-',
        outLine: '-',
      },
      EquipmentTableList: {},
      noCleaningRecordOverList: [],
      companyDetialTable: {
        address: '-',
        ownerName: '',
        phoneNumber: '-',
        name: '-',
        cleanDate: '-',
        planCleanDate: '-',
        tableList: [],
      },
      lixianListTable: {},
      zhengchangCleaningRecordTable: [],
      // warnPageTableList:{},
      equipmentStatus: '1',
      scaleType: '1',
      canyinTypeName: '单位食堂',
      shebeiTypeName: '设备在线数',
      warmTypeName: '超期未清洗报警',
      outLineTypeName: '设备离线记录',
      showCanyinDialog: false,
      showCompanyDetialDialog: false,
      showZhengchangDialog: false,
      showPieChaoqiDialog: false,
      CanyinTable: null,
      totalItemEquipProblem: null,
      totalzhengchangCleaningRecordTable: null,
      totalNoCleaningRecordOver: null,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      showShebeiDialog: false,
      equipmentParams: {
        pageNum: 1,
        pageSize: 10,
      },
      table: [],
      areaChooseName: null,
      showLeftBox: true,
      leftStreetList: [],
      polygon: null,
      district: null,
      cleanStatus: '',
      realTimeDataNew: [],
      showZheData: [
        '非甲烷总烃浓度',
        '总悬浮颗粒物TSP',
        '油烟浓度',
        '温度',
        '设备状态',
      ],
      shebeiShishishuju: '',
      rowObj: {
        companyName: '',
        equipmentTypeName: '',
        code: '',
      },
      showOilDialog: false,
      oilData: [],
      oilParams: {
        pageNum: 1,
        pageSize: 10,
      },
      totalOilData: null,
      showNongDuZhexian: false,
      shebeiNongduZhexian: '实时数据',
      timeValueNongDu: moment().format('YYYY-MM-DD'),
      nongDuStartTime: '',
      nongEndTime: '',
      createTimeLine2: [],
      nongduLine2: [],
      lineCharts2: null,
      lineCharts3: null,
      barTime: [],
      barData: [],
      shebeiNongduZhexianTitle: '',
      nongduLine3: [],
      createTimeLine3: [],
    }
  },
  methods: {
    async getSensorHistory() {
      this.openLoading()
      this.startTime = this.timeValue1[0]
      this.endTime = this.timeValue1[1]
      await this.showZhexiantu(this.rowObj)
      this.openLoading().close()
    },
    // 点击设备折线图
    async showZhexiantu(row) {
      this.rowObj = row
      this.shebeiShishishuju = `${row.name}-实时数据`
      this.code = row.code
      const res = await realTimeDataRecord({
        equipmentCode: this.code,
        startTime: this.startTime,
        endTime: this.endTime,
      })

      if (!res.data || res.data.type == null) {
        this.draw_echartsBox1()
        this.historyLineMonth = []
        this.historyLineValue_temperature = []
        this.historyLineValue_temperature2 = []
        this.historyLineValue_dustMmol = []
        this.historyLineValue_lampblackMmol = []
        this.historyLineValue_pmMmol = []
        this.historyLineValue_equipmentstatus = []
        this.showZhexian = true
        return
      }

      if (res.data.type == 1) {
        this.showZheData = ['温度', '设备状态']
        this.historyLineMonth = res.data.data
          .filter((obj) => obj.createTime !== null)
          .map((obj) => obj.createTime)
        this.historyLineValue_temperature = res.data.data
          .filter((obj) => obj.temperatureMmol !== null)
          .map((obj) => obj.temperatureMmol)

        this.historyLineValue_dustMmol = res.data.data
          .filter((obj) => obj.dustMmol !== null)
          .map((obj) => obj.dustMmol)

        this.historyLineValue_lampblackMmol = res.data.data
          .filter((obj) => obj.lampblackMmol !== null)
          .map((obj) => obj.lampblackMmol)

        this.historyLineValue_pmMmol = res.data.data
          .filter((obj) => obj.pmMmol !== null)
          .map((obj) => obj.pmMmol)

        this.historyLineValue_equipmentstatus = res.data.data
          .filter((obj) => obj.equipmentStatus !== null)
          .map((obj) => +obj.equipmentStatus)
        this.draw_echartsBox1()
        this.showZhexian = true
      } else if (res.data.type == 0) {
        this.showZheData = ['5分钟油烟浓度数据', '两小时油烟浓度数据', '作业值']
        this.historyLineValue_lampblackMmol = res.data.data
          .filter((obj) => obj.lampblackMmol !== null)
          .map((obj) => obj.lampblackMmol)
        await this.getFiveMinutesGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        await this.twoHoursGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        await this.workingGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        this.shebeiNongduZhexianTitle = this.rowObj.name + '-' + '实时数据'
        this.draw_echartsBox2()
        this.showNongDuZhexian = true
      } else if (res.data.type == 2) {
        this.showZheData = ['温度', '温度2', '设备状态']
        this.historyLineMonth = res.data.data
          .filter((obj) => obj.createTime !== null)
          .map((obj) => obj.createTime)
        this.historyLineValue_temperature = res.data.data
          .filter((obj) => obj.temperatureMmol !== null)
          .map((obj) => obj.temperatureMmol)

        this.historyLineValue_dustMmol = res.data.data
          .filter((obj) => obj.dustMmol !== null)
          .map((obj) => obj.dustMmol)

        this.historyLineValue_lampblackMmol = res.data.data
          .filter((obj) => obj.lampblackMmol !== null)
          .map((obj) => obj.lampblackMmol)

        this.historyLineValue_pmMmol = res.data.data
          .filter((obj) => obj.pmMmol !== null)
          .map((obj) => obj.pmMmol)

        this.historyLineValue_equipmentstatus = res.data.data
          .filter((obj) => obj.equipmentStatus !== null)
          .map((obj) => +obj.equipmentStatus)
        this.historyLineValue_temperature2 = res.data.data
          .filter((obj) => obj.temperatureMmol !== null)
          .map((obj) => obj.temperatureMmolTwo)
        this.draw_echartsBox1()
        this.showZhexian = true
      }
    },
    draw_echartsBox1() {
      var myChart = this.$echarts.init(document.getElementById('echartsBox1'))

      myChart.setOption({
        // backgroundColor: "#000",
        legend: {
          icon: 'circle',
          data: this.showZheData,
          textStyle: {
            color: '#ccc', // 设置图例文字颜色为红色
            fontSize: '20px',
          },
          itemWidth: 10,
          itemHeight: 10,
          left: '10%',
          itemGap: 20,
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
            fontSize: '18px',
          },
          padding: [10, 10],
          // extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        dataZoom: [
          {
            type: 'inside', //x轴
            xAxisIndex: 0,
            zoomOnMouseWheel: true,
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.historyLineMonth,
            axisLine: {
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: '14px',
              },
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#556677',
                fontSize: '18px',
              },
            },
            splitLine: {
              show: false,
            },
          },
          {
            minInterval: 1,
            min: 10,
            type: 'value',
            position: 'right',
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#556677',
              },
              formatter: '{value}',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '非甲烷总烃浓度',
            type: 'line',
            data: this.historyLineValue_pmMmol,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#A96DF7',
                borderColor: '#A96DF7',
              },
            },
          },
          {
            name: '总悬浮颗粒物TSP',
            type: 'line',
            data: this.historyLineValue_dustMmol,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#1EF9FD',
                borderColor: '#1EF9FD',
              },
            },
          },
          {
            name: '油烟浓度',
            type: 'line',
            data: this.historyLineValue_lampblackMmol,
            symbolSize: 1,
            yAxisIndex: 0,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#0BD983',
                borderColor: '#0BD983',
              },
            },
          },
          {
            name: '温度',
            type: 'line',
            data: this.historyLineValue_temperature,
            symbolSize: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#E02E61',
                borderColor: '#E02E61',
              },
            },
          },
          {
            name: '温度2',
            type: 'line',
            data: this.historyLineValue_temperature2,
            symbolSize: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#138DFF',
                borderColor: '#138DFF',
              },
            },
          },
          {
            name: '设备状态',
            type: 'line',
            data: this.historyLineValue_equipmentstatus,
            // symbolSize: 1,
            // yAxisIndex: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#FFA011',
                borderColor: '#FFA011',
              },
            },
          },
        ],
      })
    },
    // 设备浓度折现
    closeZhexianlNongDuDialog() {
      this.showNongDuZhexian = false
      this.createTimeLine2 = []
      this.nongduLine2 = []
      this.timeValueNongDu = moment().format('YYYY-MM-DD')
      this.shebeiNongduZhexian = '实时数据'
    },
    async getNongDUDate() {
      if (this.lineCharts2) {
        this.lineCharts2.clear()
      }
      await this.twoHoursGasConcentration({
        equipmentCode: this.code,
        date: this.timeValueNongDu,
      })
      await this.getFiveMinutesGasConcentration({
        equipmentCode: this.code,
        date: this.timeValueNongDu,
      })
      await this.workingGasConcentration({
        equipmentCode: this.code,
        date: this.timeValueNongDu,
      })
      this.$nextTick(() => {
        this.draw_echartsBox2()
      })
    },
    async chooseSelectType(type) {
      if (this.lineCharts2) {
        this.lineCharts2.clear()
      }
      if (this.lineCharts3) {
        this.lineCharts3.clear()
      }
      this.shebeiNongduZhexian = type
      this.shebeiNongduZhexianTitle = this.rowObj.name + '-' + type
      if (type == '实时数据') {
        await this.getFiveMinutesGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        await this.twoHoursGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        this.$nextTick(() => {
          this.draw_echartsBox2()
        })
      } else if (type == '2小时数据') {
        await this.twoHoursGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        await this.getFiveMinutesGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        await this.workingGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        this.$nextTick(() => {
          this.draw_echartsBox2()
        })
      } else {
        await this.workingGasConcentration({
          equipmentCode: this.code,
          date: this.timeValueNongDu,
        })
        this.$nextTick(() => {
          this.draw_echartsBox3()
        })
      }
    },
    async getFiveMinutesGasConcentration(obj) {
      const res = await fiveMinutesGasConcentration(obj)
      this.createTimeLine2 = res.data.map((obj) =>
        obj.createTime.substring(obj.createTime.indexOf(' ') + 1)
      )
      this.nongduLine2 = res.data.map((obj) => +obj.remark)
    },
    async twoHoursGasConcentration(obj) {
      const res = await twoHoursGasConcentration(obj)
      this.createTimeLine3 = res.data.map((obj) =>
        obj.createTime.substring(obj.createTime.indexOf(' ') + 1)
      )
      this.nongduLine3 = res.data.map((obj) => +obj.remark)
    },
    async workingGasConcentration(obj) {
      const res = await workingGasConcentration(obj)
      this.barTime = res.data.map(
        (item) =>
          item.startTime.substring(item.startTime.indexOf(' ') + 1) +
          '-' +
          item.endTime.substring(item.endTime.indexOf(' ') + 1)
      )
      this.barData = res.data.map((item) => item.remark)
    },
    draw_echartsBox2() {
      this.lineCharts2 = this.$echarts.init(
        document.getElementById('echartsBox2')
      )

      this.lineCharts2.setOption({
        // backgroundColor: "#000",
        legend: {
          icon: 'circle',
          data: this.showZheData,
          textStyle: {
            color: '#ccc', // 设置图例文字颜色为红色
            fontSize: '20px',
          },
          itemWidth: 10,
          itemHeight: 10,
          left: '10%',
          itemGap: 20,
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
            fontSize: '18px',
          },
          padding: [10, 10],
          // extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        dataZoom: [
          {
            type: 'inside', //x轴
            xAxisIndex: 0,
            zoomOnMouseWheel: true,
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.createTimeLine2,
            axisLine: {
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: '14px',
              },
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
          {
            type: 'category',
            data: this.barTime,
            axisLine: {
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: '14px',
              },
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
            position: 'bottom', // 第二个 x 轴也设置在底部
            offset: 40, // 可以设置偏移量，使得两个 x 轴不重叠
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#556677',
                fontSize: '18px',
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '5分钟油烟浓度数据',
            type: 'line',
            data: this.nongduLine2,
            symbolSize: 1,
            yAxisIndex: 0,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#FFE500',
                borderColor: '#FFE500',
              },
            },
          },
          {
            name: '两小时油烟浓度数据',
            type: 'line',
            data: this.nongduLine3,
            symbolSize: 1,
            yAxisIndex: 0,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#3CFF63',
                borderColor: '#3CFF63',
              },
            },
          },
          {
            name: '作业值',
            data: this.barData,
            type: 'bar',
            // color: '#1EF9FD',
            // barWidth: 45
            z: 10, // 提高层级
            label: {
              show: true, // 是否显示标签
              position: 'top', // 标签的位置
              // 可以自定义标签的显示格式
              color: '#1EF9FD',
              fontSize: '18px',
            },
            xAxisIndex: 1,
            itemStyle: {
              normal: {
                // 柱状颜色设置为透明
                color: 'transparent',
                // 边框颜色
                barBorderColor: '#1EF9FD',
                // 边框宽度
                barBorderWidth: 2,
                // 可以设置边框样式，实线或者虚线
                barBorderStyle: 'solid',
              },
            },
          },
        ],
      })
    },
    // draw_echartsBox3() {
    //   this.lineCharts3 = this.$echarts.init(
    //     document.getElementById('echartsBox3')
    //   )
    //   this.lineCharts3.setOption({
    //     xAxis: {
    //       type: 'category',
    //       data: this.barTime,
    //       axisLabel: {
    //         interval: 0, // 显示所有刻度
    //         rotate: 30,
    //         fontSize: '15px',
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: '#DCE2E8',
    //         },
    //       },
    //       boundaryGap: true,
    //       axisTick: {
    //         show: true, // 显示刻度线
    //         length: 10, // 刻度线的长度
    //       },
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       top: '5%',
    //       containLabel: true,
    //     },
    //     dataZoom: [
    //       {
    //         type: 'inside', //x轴
    //         xAxisIndex: 0,
    //       },
    //     ],
    //     tooltip: {
    //       trigger: 'axis',
    //       backgroundColor: '#fff',
    //       textStyle: {
    //         color: '#5c6c7c',
    //         fontSize: '18px',
    //       },
    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisTick: {
    //         show: true,
    //       },
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: '#DCE2E8',
    //         },
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: '#556677',
    //           fontSize: '18px',
    //         },
    //       },
    //       splitLine: {
    //         show: false,
    //       },
    //     },
    //     series: [
    //       {
    //         data: this.barData,
    //         type: 'bar',
    //         // color: '#1EF9FD',
    //         // barWidth: 45
    //         label: {
    //           show: true, // 是否显示标签
    //           position: 'top', // 标签的位置
    //           // 可以自定义标签的显示格式
    //           color: '#1EF9FD',
    //           fontSize: '18px',
    //         },
    //         itemStyle: {
    //           normal: {
    //             // 柱状颜色设置为透明
    //             color: 'transparent',
    //             // 边框颜色
    //             barBorderColor: '#1EF9FD',
    //             // 边框宽度
    //             barBorderWidth: 2,
    //             // 可以设置边框样式，实线或者虚线
    //             barBorderStyle: 'solid',
    //           },
    //         },
    //       },
    //     ],
    //   })
    // },
    //正常清洗记录 & 超期清洗记录
    async getCleaningRecord(townCodeList) {
      const res = await cleaningRecord({
        pageNum: this.params.pageNum,
        pageSize: 10,
        cleanStatus: this.cleanStatus,
        townCodeList,
      })
      this.zhengchangCleaningRecordTable = res.data.list
      this.totalzhengchangCleaningRecordTable = res.data.total
      this.params.pageNum = 1
    },
    currentZhengchangCleaningRecord(pageNum) {
      this.params.pageNum = pageNum
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.getCleaningRecord(renderL.length ? renderL : null)
    },
    closeZhexianlDialog() {
      this.historyLineMonth = []
      this.historyLineValue_temperature = []
      this.historyLineValue_temperature2 = []
      this.historyLineValue_dustMmol = []
      this.historyLineValue_lampblackMmol = []
      this.historyLineValue_pmMmol = []
      this.historyLineValue_equipmentstatus = []
      this.showZhexian = false
    },
    closeCompanyDetialDialog() {
      this.showCompanyDetialDialog = false
    },
    async showCompanyDetial(companyId) {
      const res = await companyDetail({ id: companyId })
      this.companyDetialTable = res.data
      this.companyDetialTable.tableList = res.data.equipmentInfoVoList
      this.showCompanyDetialDialog = true
    },
    // 设备离线数
    async showEquipmentOutLine(type) {
      // console.log(type)
      this.outLineTypeName = type
      if (this.outLineTypeName === '设备离线记录') {
        const filterL = this.leftStreetList.filter((item) => item.checked)
        const renderL = filterL.map((item) => item.areaCode)
        const res = await equipmentPageList({
          pageNum: this.params.pageNum,
          pageSize: 10,
          equipmentStatus: '0',
          townCodeList: renderL.length ? renderL : null,
        })
        this.lixianListTable = res.data.list
        this.totalItemEquipProblem = res.data.total
        this.params.pageNum = 1
      }
      this.equipmentOutLineTanchuan = true
    },
    //违规报警记录
    async getWarnPageList(townCodeList) {
      const res = await warnPageList({
        pageNum: this.params.pageNum,
        pageSize: 10,
        townCodeList,
      })
      this.noCleaningRecordOverList = res.data.list
      this.totalNoCleaningRecordOver = res.data.total
      this.params.pageNum = 1
      // console.log('weigui', res)
    },
    //超期未清洗记录
    async getNoCleaningRecordOver(townCodeList) {
      const res = await noCleaningRecordOver({
        pageNum: this.params.pageNum,
        pageSize: 10,
        townCodeList,
      })
      this.noCleaningRecordOverList = res.data.list
      this.totalNoCleaningRecordOver = res.data.total
      this.params.pageNum = 1
    },
    //超期未清洗记录 & 违规报警记录
    showchaoqiDialog(type) {
      this.warmTypeName = type
      if (this.warmTypeName === '超期未清洗记录') {
        const filterL = this.leftStreetList.filter((item) => item.checked)
        const renderL = filterL.map((item) => item.areaCode)
        this.getNoCleaningRecordOver(renderL.length ? renderL : null)
      } else if (this.warmTypeName === '违规报警记录') {
        const filterL = this.leftStreetList.filter((item) => item.checked)
        const renderL = filterL.map((item) => item.areaCode)
        this.getWarnPageList(renderL.length ? renderL : null)
      }
      this.showChaoqiDialog = true
    },
    async getCleaningRecordWarn(townCodeList) {
      const res = await cleaningRecordWarn({
        townCodeList,
      })
      this.table = res.data
    },
    async getWarnStatistics(townCodeList) {
      const res = await warnStatistics({
        townCodeList,
      })
      this.WarnStatisticsData = res.data
    },

    async getCleaningRecordData(townCodeList) {
      const res = await cleaningRecordData({
        townCodeList,
      })
      this.cleaningRecordData = res.data
      this.drow_piebox()
    },
    currentOutdateLinePage(pageNum) {
      this.params.pageNum = pageNum
      if (this.warmTypeName === '超期未清洗记录') {
        const filterL = this.leftStreetList.filter((item) => item.checked)
        const renderL = filterL.map((item) => item.areaCode)
        this.getNoCleaningRecordOver(renderL.length ? renderL : null)
      } else if (this.warmTypeName === '违规报警记录') {
        const filterL = this.leftStreetList.filter((item) => item.checked)
        const renderL = filterL.map((item) => item.areaCode)
        this.getWarnPageList(renderL.length ? renderL : null)
      }
    },

    showshebeiDialog(type) {
      this.shebeiTypeName = type
      if (this.shebeiTypeName === '设备在线数') {
        this.equipmentStatus = '1'
      } else if (this.shebeiTypeName === '设备离线数') {
        this.equipmentStatus = '0'
      }
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.getEquipmentPageList(renderL.length ? renderL : null)
      this.showShebeiDialog = true
    },
    // 设备统计列表
    async getEquipmentPageList(townCodeList) {
      const res = await equipmentPageList({
        pageNum: this.params.pageNum,
        pageSize: 10,
        equipmentStatus: this.equipmentStatus,
        townCodeList,
      })
      this.EquipmentTableList = res.data.list
      this.totalItemEquipProblem = res.data.total
      this.params.pageNum = 1
    },
    // table表格第一列合并
    objectSpanMethod({ row, column, rowIndex }) {
      if (column.property === 'companyName') {
        const currentName = row.companyName
        const count = this.EquipmentTableList.filter(
          (item) => item.companyName === currentName
        ).length
        const prevRow = this.EquipmentTableList[rowIndex - 1]

        if (prevRow && prevRow.companyName === currentName) {
          return [0, 0] // 合并
        }
        return [count, 1] // 行数和列数
      }
      return [1, 1] // 默认不合并
    },
    // 餐饮单位
    async getPageList(townCodeList) {
      const res = await pageList({
        pageNum: this.params.pageNum,
        pageSize: 10,
        scaleType: this.scaleType,
        townCodeList,
      })
      this.CanyinTable = res.data.list
      this.totalItemEquipProblem = res.data.total
      this.params.pageNum = 1
    },
    showDanweuDialog(type) {
      this.canyinTypeName = type
      if (this.canyinTypeName === '大型餐厅单位') {
        this.scaleType = 3
      } else if (this.canyinTypeName === '中型餐厅单位') {
        this.scaleType = 2
      } else if (this.canyinTypeName === '小型餐厅单位') {
        this.scaleType = 1
      }
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.getPageList(renderL.length ? renderL : null)

      this.showCanyinDialog = true
    },
    closeDialogShow() {
      this.showCanyinDialog = false
      this.showShebeiDialog = false
      this.showChaoqiDialog = false
      this.equipmentOutLineTanchuan = false
      this.showZhengchangDialog = false
      this.showZhexian = false
    },
    currentCanyinPage(pageNum) {
      this.params.pageNum = pageNum
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.getPageList(renderL.length ? renderL : null)
    },

    currentShebeiPage(pageNum) {
      this.params.pageNum = pageNum
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.getEquipmentPageList(renderL.length ? renderL : null)
    },

    async getNum(townCodeList) {
      const res = await num({ townCodeList })
      this.L1_total = res.data.total
      this.L1_large = res.data.large
      this.L1_medium = res.data.medium
      this.L1_small = res.data.small
    },

    async getEquipmentInfoNum(townCodeList) {
      const res = await equipmentInfoNum({ townCodeList })
      this.equipmentInfoNum = res.data
    },

    initGaoDeMap() {
      // 高德地图key的密钥
      window._AMapSecurityConfig = {
        securityJsCode: '5004f44a3cb4ec0cbb1841b47e80a3d3', // 密钥
      }
      AMapLoader.load({
        key: '58ed2ba42d17a21d3cd60e0a0a0d4870', // 替换为你的高德地图API Key
        version: '2.0',
        plugins: ['AMap.DistrictSearch'],
      }).then((AMap) => {
        // this.AMap = AMap
        this.gaodeMap = new AMap.Map('gaodeMap', {
          // mapStyle: 'amap://styles/blue', //设置地图的显示样式
          // center: [120.4246, 30.855243],
          center: [120.1555, 30.9],
          viewMode: '2D',
          labelzIndex: 130,
          // pitch: 40,
          zoom: 10,
          zooms: [10, 20], //地图显示的缩放级别范围, 默认为 [2, 20] ，
          // rotation: 20,//初始地图顺时针旋转的角度
          mapStyle: 'amap://styles/dark',
        })
        this.districtSearch(this.areaChoose)
      })
    },
    //2.添加点标记
    districtSearch(areaChoose) {
      if (this.polygon) {
        this.gaodeMap.remove(this.polygon) //清除上次结果
        this.gaodeMap.clearMap()
        this.polygon.setMap(null)
        this.polygon = null
      }
      if (!this.district) {
        // 创建行政区划查询对象
        this.district = new AMap.DistrictSearch({
          extensions: 'all',
          level: 'city', //level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
          //   subdistrict: 0
        })
      }
      // 查询并显示

      this.district.search(areaChoose, async (status, result) => {
        if (status === 'complete') {
          var geojosn = result.districtList[0]?.boundaries[0] //该县拿到数据有两组，正常获取下标0
          this.polygon = new AMap.Polygon({
            path: geojosn, //多边形路径
            strokeColor: '#523ec8', //线条颜色
            strokeWeight: 2, //线条宽度
            fillColor: 'rgba(0, 0, 0,0.5)', //多边形填充颜色0, 188, 193
            fillOpacity: 0.2, //填充透明度
          })
          // 添加多边形到地图上
          this.polygon.setMap(this.gaodeMap)
          // 调整地图视野到多边形所覆盖的区域
          this.gaodeMap.setFitView(this.polygon)
          // this.addLabelMarker()
          this.restaurantSprinkle(null)
        }
      })
    },
    addNewPolygon(filterL) {
      if (this.polygon) {
        this.gaodeMap.remove(this.polygon) //清除上次结果
        this.gaodeMap.clearMap()
        this.polygon.setMap(null)
        this.polygon = null
      }
      filterL.forEach((item) => {
        this.polygon = new AMap.Polygon({
          path: polygonList.find((PItem) => PItem.code === +item.areaCode)
            ?.polygon, //多边形路径
          strokeColor: '#523ec8', //线条颜色
          strokeWeight: 2, //线条宽度
          fillColor: 'rgba(0, 0, 0,0.5)', //多边形填充颜色0, 188, 193
          fillOpacity: 0.2, //填充透明度
        })

        // 添加多边形到地图上
        this.polygon.setMap(this.gaodeMap)
        // 调整地图视野到多边形所覆盖的区域
        // this.gaodeMap.setFitView(this.polygon)
      })
    },
    addMarker() {
      // let arr = []
      if (!this.markers) {
        this.markers = []
      }
      // 清除之前的标记点
      this.markers.forEach((marker) => {
        this.gaodeMap.remove(marker)
      })
      this.markers = []
      if (!this.markerData.length) {
        return
      }
      // console.log( this.markerData);
      this.markerData.forEach((item) => {
        let marker = new AMap.Marker({
          map: this.gaodeMap,
          icon: new AMap.Icon({
            size: new AMap.Size(10, 10), //图标尺寸
            image: item.icon, //Icon 的图像
            // imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(10, 10), //根据所设置的大小拉伸或压缩图片
          }),
          // icon:item.icon,
          position: item.position, //位置
        })
        this.gaodeMap.add(marker)
        // 存储标记点
        this.markers.push(marker)
        AMap.Event.addListener(marker, 'click', async () => {
          await this.showCompanyDetial(item.id)
          this.showCompanyDetialDialog = true
        })
      })
      this.openLoading().close()
    },
    drow_piebox() {
      var myChart = this.$echarts.init(document.getElementById('pieBox'))
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
        },
        legend: {
          icon: 'circle',
          top: '85%',
          left: 'center',
          itemGap: 90,
          data: [
            {
              name: '正常清洗数',
              textStyle: {
                color: '#fff', // 系列1的文本颜色设置为红色
                fontSize: '18px',
              },
            },
            {
              name: '超期清洗数',
              textStyle: {
                color: '#fff', // 系列1的文本颜色设置为红色
                fontSize: '18px',
              },
            },
          ],
        },
        series: [
          {
            type: 'pie',
            radius: ['30%', '60%'],
            padAngle: 3,
            label: {
              fontSize: 16,
              color: '#fff',
            },
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              {
                value: this.cleaningRecordData.normalCleanCount,
                name: '正常清洗数',
                itemStyle: {
                  color: '#267BDB', // 指定数据项的颜色
                },
              },
              {
                value: this.cleaningRecordData.overdueCleanCount,
                name: '超期清洗数',
                itemStyle: {
                  color: '#E18E47', // 指定数据项的颜色
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      let _this = this
      myChart.on('click', function (params) {
        const filterL = _this.leftStreetList.filter((item) => item.checked)
        const renderL = filterL.map((item) => item.areaCode)
        _this.getCleaningRecord(renderL.length ? renderL : null)
        _this.showZhengchangDialog = true
        if (params.name === '正常清洗数') {
          _this.cleanStatus = '1'
        } else if (params.name === '超期清洗数') {
          _this.cleanStatus = '2'
        }
      })
    },
    deleteStreetList(e) {
      this.checkedStreetList[e].checked = false
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      if (filterL.length === 0) {
        this.districtSearch(this.areaChoose)
      } else {
        this.addNewPolygon(filterL)
      }
      this.restaurantSprinkle(renderL.length ? renderL : null)

      this.getNum(renderL.length ? renderL : null)
      this.getEquipmentInfoNum(renderL.length ? renderL : null)
      this.getCleaningRecordData(renderL.length ? renderL : null)
      this.getWarnStatistics(renderL.length ? renderL : null)
      this.getCleaningRecordWarn(renderL.length ? renderL : null)
    },
    // 选择街道 点击再掉其他接口
    chooseStreetList(index) {
      this.leftStreetList[index].checked = !this.leftStreetList[index].checked
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)

      if (filterL.length === 13) {
        if (this.polygon) {
          this.gaodeMap.remove(this.polygon) //清除上次结果
          this.gaodeMap.clearMap()
          this.polygon.setMap(null)
        }
        this.districtSearch(this.areaChoose)
      } else {
        this.addNewPolygon(filterL)
      }

      this.restaurantSprinkle(renderL.length ? renderL : null)
      this.getNum(renderL.length ? renderL : null)
      this.getEquipmentInfoNum(renderL.length ? renderL : null)
      this.getCleaningRecordData(renderL.length ? renderL : null)
      this.getWarnStatistics(renderL.length ? renderL : null)
      this.getCleaningRecordWarn(renderL.length ? renderL : null)
    },
    async areaDict() {
      const res = await list({ type: 'squadron' })
      this.leftStreetList = res.data.map((item) => {
        return {
          name: item.name,
          areaCode: item.code,
          checked: false,
        }
      })
    },
    async restaurantSprinkle(townCodeList) {
      const res = await restaurantSprinkle({
        townCodeList,
      })
      const list = res.data.map((item) => {
        return {
          ...item,
          icon: Map1,
          position: [item.longitude, item.latitude],
        }
      })
      list.forEach((item) => {
        if (item.scaleType == 2) {
          item.icon = Map2
        } else if (item.scaleType == 3) {
          item.icon = Map3
        }
      })

      this.markerData = list
      this.addMarker()
    },
    openOilDialog() {
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.smokeAlarmPageList(renderL.length ? renderL : null)
      this.showOilDialog = true
    },
    closeOilDialog() {
      this.showOilDialog = false
    },
    currentOilChange(pageNum) {
      this.oilParams.pageNum = pageNum
      const filterL = this.leftStreetList.filter((item) => item.checked)
      const renderL = filterL.map((item) => item.areaCode)
      this.smokeAlarmPageList(renderL.length ? renderL : null)
    },
    async smokeAlarmPageList(townCodeList) {
      const res = await smokeAlarmPageList({
        pageNum: this.oilParams.pageNum,
        pageSize: 10,
        townCodeList,
      })
      this.totalOilData = res.data.total
      this.oilData = res.data.list
    },
  },
  async created() {
    setTimeout(async () => {
      await this.areaDict()
      await this.getNum(null)
      await this.getEquipmentInfoNum(null)
      await this.getEquipmentPageList(null)
      this.getCleaningRecordData()
      this.getWarnStatistics(null)
      this.getCleaningRecordWarn(null)
    }, 0)
    setInterval(async () => {
      await this.areaDict()
      await this.getNum(null)
      await this.getEquipmentInfoNum(null)
      await this.getEquipmentPageList(null)
      this.getCleaningRecordData()
      this.getWarnStatistics(null)
      this.getCleaningRecordWarn(null)
    }, 1000 * 60 * 3)
    console.log(this.timeValueNongDu)
  },
  mounted() {
    this.$nextTick(() => {
      this.openLoading()
      this.initGaoDeMap()
    })
    this.drow_piebox()
    this.draw_echartsBox1()
  },
  watch: {},
  computed: {
    checkedStreetList() {
      const list = this.leftStreetList?.filter((item) => item.checked)
      return list ? list : []
    },
  },
  filters: {},
}
</script>

<style scoped lang="scss">
#gaodeMap {
  width: 1920px;
  height: 1080px;
  position: relative;
  z-index: 0;
  position: absolute;
  :deep() .amap-logo {
    display: none !important;
  }
  :deep() .amap-copyright {
    display: none !important;
  }
  .headerTitle {
    width: 1927px;
    height: 114px;
    font-family: 'YouSheBiaoTiHei';
    font-size: 43px;
    font-weight: 800;
    line-height: 70px;
    letter-spacing: 0.3em;
    text-align: center;
    background-image: url('@/assets/head.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
    color: #fff;
    z-index: 99;
  }
}

.sideBox {
  z-index: 99;
  .sideBox_title {
    width: 100%;
    height: 34px;
    padding-left: 30px;
    position: absolute;
    font-family: Source Han Sans;
    font-size: 22px;
    font-weight: bold;
    line-height: 34px;
    letter-spacing: 0.3em;
    color: #ffffff;
  }
  .leftBox_top {
    position: absolute;
    top: 66px;
    left: 108px;
    width: 100%;
    height: 29px;
    font-family: Source Han Sans;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.3em;
    font-variation-settings: 'opsz' auto;
    color: #ffffff;
    span {
      position: absolute;
      top: -3px;
      left: 178px;
      width: 47px;
      height: 38px;
      font-size: 26px;
      font-weight: bold;
      line-height: normal;
      color: #26e1eb;
    }
  }
  .leftBox_top2 {
    left: 141px;
    span {
      left: 138px;
    }
  }
  .leftBox_top3 {
    left: 141px;
    top: 50px;
    span {
      left: 138px;
    }
  }
  .leftBox1 {
    z-index: 99;
    position: absolute;
    left: 20px;
    top: 75px;
    width: 470px;
    height: 291px;
    background-image: url('@/assets/组 3022@1x.png');
  }
  .leftBox_numBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 110px 0 0px 0;
    box-sizing: border-box;
    .numBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: left;
      width: 40%;
      .num {
        font-family: Source Han Sans;
        font-size: 26px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0px;
        text-decoration: underline;
        text-underline-offset: 7px;
        color: #26e1eb;
        cursor: pointer;
        margin-bottom: 5px;
        text-align: left;
      }
      .numBottom {
        font-size: 20px;
        margin-bottom: 0;
      }
      .numColor2 {
        color: #0bd983;
      }
      .numColor3 {
        color: #05f0ff;
      }
      .numColor4 {
        color: #fa7845;
      }
      .numColor5 {
        color: #de5fb1;
      }
      .name {
        margin-top: 10px;
        font-family: Source Han Sans;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.1em;
        color: #ffffff;
      }
      .name_space {
        letter-spacing: 0.3em;
      }
    }
  }
  .leftBox_numBox2 {
    justify-content: space-around;
    padding: 110px 40px 0px 40px;
  }

  .leftBox_numBox3 {
    height: 60%;
    justify-content: space-around;
    padding: 140px 0px 0px 0px;
  }
  .leftBox_numBox4 {
    margin-top: 70px;
    height: 65px;
    justify-content: space-around;
    padding: 0px 0px 0px 0px;
  }

  .leftBox2 {
    z-index: 99;
    position: absolute;
    left: 20px;
    top: 380px;
    width: 470px;
    height: 291px;
    background-image: url('@/assets/组 3022@1x.png');
  }

  .leftBox3 {
    z-index: 99;
    position: absolute;
    left: 19px;
    top: 694px;
    width: 470px;
    height: 359px;
    background-image: url('@/assets/LBox3.png');

    #pieBox {
      position: absolute;
      top: 48px;
      left: 0;
      width: 470px;
      height: 318px;
    }
  }

  .rightBox1 {
    z-index: 99;
    position: absolute;
    left: 1430px;
    top: 75px;
    width: 470px;
    height: 361px;
    background-image: url('@/assets/组 48448@1x.png');
    .btnBox {
      display: flex;
      position: absolute;
      top: 51px;
      left: 20px;
      color: #a8d6ff;
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: normal;
      line-height: 40px;
      text-align: center;
      letter-spacing: 0px;
      .currentBtn {
        margin-right: 18.5px;
        width: 106px;
        height: 40px;
        background-image: url('@/assets/btn1.png');
        cursor: pointer;
        color: #01c2ff;
      }

      .historyBtn {
        width: 106px;
        height: 40px;
        background-image: url('@/assets/btn2.png');
        cursor: pointer;
      }
    }
    .img1 {
      position: absolute;
      left: 93px;
      bottom: 226px;
    }
    .img2 {
      position: absolute;
      left: 314px;
      bottom: 226px;
    }
    .img3 {
      position: absolute;
      left: 93px;
      bottom: 81px;
    }
    .img4 {
      position: absolute;
      left: 314px;
      bottom: 81px;
    }
  }

  .rightBox2 {
    z-index: 99;
    position: absolute;
    left: 1429px;
    top: 456px;
    width: 470px;
    height: 597px;
    background-image: url('@/assets/rBox2.png');
    .listBox {
      position: absolute;
      left: 0px;
      top: 41px;
      width: 470px;
      height: 556px;
      padding: 15px 0px;
      box-sizing: border-box;
      .listTitel {
        padding: 11px 0;
        box-sizing: border-box;
        width: 100%;
        height: 45px;
        border-radius: 4px;
        opacity: 1;
        background: #053c4d;
        display: flex;
        font-family: Source Han Sans;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0em;
        color: #ffffff;
        .titleName {
          width: 30%;
          text-align: center;
        }
        .titleName1 {
          width: 40%;
          text-align: center;
        }
      }
      .listBody {
        width: 100%;
        height: 468px;
        overflow-y: scroll;
        overflow-x: hidden;
        box-sizing: border-box;
        // overflow: hidden;
        .subList {
          width: 100%;
          height: 58px;
          line-height: 58px;
          border-bottom: 1px solid #0a5f79;
          display: flex;
          justify-content: space-between;
          padding-left: 10px;
          align-items: center;
          .subList_item {
            text-align: center;
            box-sizing: content-box;
            padding-top: 10px;
            // width: 84px;
            font-family: Source Han Sans;
            font-size: 18px;
            font-weight: 500;
            line-height: normal;
            color: #a8d6ff;
            width: 30%;
          }
          .subList_item2 {
            left: 200px;
            width: 40%;
            text-align: center;
          }
          .subList_item3 {
            width: 30%;
          }
        }
      }
    }
  }
}

// 弹窗
.canyinDanweiDialogVisible {
  position: relative;
  z-index: 100;
  width: 1252px;
  height: 757px;
  background-image: url('@/assets/pic_alert_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 200px;
  overflow: hidden;
  .closeX {
    display: flex;
    justify-content: right;
    padding: 10px 10px 0;
    img {
      cursor: pointer;
    }
  }
  .title {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
    .subTitle {
      color: #9e9e9e;
      font-size: 12px;
    }
  }
  .table {
    margin-top: 12px;
    padding: 0 30px;
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .companyDetialTable {
    margin-top: 24px;
    width: 100%;
    position: relative;
    .timeBlock {
      display: flex;
      justify-content: right;
      position: absolute;
      top: -25px;
      right: 22px;
    }
    #echartsBox1 {
      margin-top: 30px;
      width: 1250px;
      height: 639px;
    }
    .topTitleBox {
      width: 1212px;
      height: 45px;
      margin-left: 20px;
      background-color: #072b40;
      display: flex;
      text-align: center;
      .subTopTitleBox {
        text-align: center;
        font-family: Source Han Sans;
        font-size: 16px;
        width: 25%;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0em;
        line-height: 45px;
        font-variation-settings: 'opsz' auto;
        color: #fff;
      }
    }
    .topTitleBox1 {
      background-color: transparent;
      display: flex;
      .subTopTitleBox1 {
        border-bottom: 1px solid #053c4d;
        height: 60px;
        line-height: 60px;
        font-family: Source Han Sans;
        width: 25%;
        font-size: 16px;
        color: #a8d6ff;
      }
    }

    .box1 {
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: content-box;
      display: flex;
      justify-content: space-between;
      .subBox {
        display: flex;
        width: 400px;
        height: 150px;
        border-radius: 4px;
        opacity: 1;
        background: rgba(5, 60, 77, 0.5);

        .leftIcon1 {
          margin: 47px 67px 53px 90px;
          box-sizing: border-box;
          width: 50px;
          height: 50px;
          background-image: url('@/assets/companyIcon.png');
        }
        .leftIcon2 {
          width: 39px;
          height: 48px;
          background-image: url('@/assets/addressIcon.png');
        }
        .leftIcon3 {
          width: 50px;
          height: 45.7px;
          background-image: url('@/assets/userIcon.png');
        }
        .leftIcon4 {
          width: 47px;
          height: 47px;
          background-image: url('@/assets/phoneIcon.png');
        }
        .leftIcon5 {
          width: 47px;
          height: 47px;
          background-image: url('@/assets/时间 (2).png');
        }
        .leftIcon6 {
          width: 47px;
          height: 47px;
          background-image: url('@/assets/日期 (1).png');
        }
        .rightBox {
          margin-top: 31px;
          .subBoxTitle {
            margin-bottom: 15px;
            font-family: Source Han Sans;
            font-size: 22px;
            font-weight: 500;
            line-height: normal;
            font-variation-settings: 'opsz' auto;
            color: #05f0ff;
          }
          .subBoxTitleDetial {
            box-sizing: border-box;
            width: 160px;
            white-space: normal;
            word-wrap: break-word;
            height: 18px;
            font-family: Source Han Sans;
            font-size: 20px;
            font-weight: 500;
            line-height: 20px;
            // font-variation-settings: 'opsz' auto;
            color: #ffffff;
          }
        }
      }
      .subBox2 {
        margin-top: 15px;
      }
    }
    .closeBoxDiv {
      width: 100%;
      padding-top: 10px;
      text-align: center;
      display: flex;
      justify-content: center;
      .closeCompanyDetialDialog {
        // margin: 271px 578px 51px 574px;

        width: 100px;
        height: 40px;
        border-radius: 2px;
        box-sizing: border-box;
        border: 1px solid #05f0ff;
        color: #05f0ff;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
  }

  .footerPage {
    width: 100%;
    text-align: center;
    margin: 10px auto 0;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #05f0ff !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
  ::v-deep .el-table__empty-block {
    background-color: #053a3b !important;
    border: none;
    .el-table__empty-text {
      color: #fff;
    }
  }
}
.canyinDanweiDialogVisible_zindex {
  z-index: 999 !important;
}
//浓度弹窗
.nongduDialogVisible {
  position: relative;
  z-index: 100;
  width: 1252px;
  height: 757px;
  background-image: url('@/assets/pic_alert_bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 200px;
  overflow: hidden;
  #echartsBox2 {
    z-index: 888;
    padding-top: 30px;
    padding-left: 10px;
    width: 1250px;
    height: 639px;
  }
  #echartsBox3 {
    z-index: 888;
    padding: 30px 10px 0;
    width: 1250px;
    height: 639px;
  }
  .closeX {
    position: absolute;
    right: 15px;
    top: 15px;
    img {
      cursor: pointer;
    }
  }
  .title {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
    padding-top: 10px;
    .subTitle {
      color: #9e9e9e;
      font-size: 12px;
    }
  }
  .timeBlock {
    padding-left: 20px;
  }
  .outerSec {
    position: absolute;
    right: 60px;
    top: 50px;
    z-index: 9999999999 !important;
    .selectBox {
      width: 253px;
      height: 35px;
      background-image: url('@/assets/Buttom_Nav@1x (1).png');
      color: #26e1eb;
      line-height: 35px;
      padding-left: 10px;
      background-repeat: no-repeat;
      cursor: pointer; /* 光标指针 */
    }

    .bottomSelect {
      z-index: 9999999999 !important;
      display: none;
      width: 253px;
      height: 112px;
      background-image: url('@/assets/Buttom_Nav@1x (1)Bottom.png');
      transform: translate(0px, 3px);

      .selectBottomItem {
        color: #26e1eb;
        line-height: 35px;
        height: 35px;
        padding-left: 9px;
        margin-bottom: 2px;
        cursor: pointer; /* 光标指针 */
      }

      .streetItemChecked {
        background-color: rgba(23, 126, 242, 0.3);
        color: #26e1eb;
        font-weight: bold;
      }
    }
  }

  /* 悬浮outerSec或其内部的任何元素时显示 */
  .outerSec:hover .bottomSelect {
    display: block;
  }

  /* 悬浮bottomSelect时也显示 */
  .bottomSelect:hover {
    display: block;
  }
}

.multiSelect {
  position: absolute;
  left: 50%;
  top: 108px;
  transform: translateX(-50%);
  z-index: 999;
  color: #26e1eb;
  font-size: 20px;
  .leftBOX {
    width: 710px;
    position: relative;
    .selectInp {
      background-image: url('@/assets/overall/矩形 263@1x (1)-top.png');
      background-repeat: no-repeat;
      width: 710px;
      height: 35px;
      line-height: 35px;
      box-sizing: border-box;
      padding-left: 10px;
      display: flex;
      align-items: center;
      .selectItem {
        width: 192px;
        height: 24px;
        line-height: 24px;
        background-color: rgba(23, 126, 242, 0.1);
        color: #26e1eb;
        padding-left: 5px;
        border-radius: 3px;
        font-weight: bold;
        display: flex;
        position: relative;
        margin-right: 8px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        .street {
          width: 160px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 8px;
        }
        .errorX {
          position: absolute;
          right: 9px;
          top: 2px;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .selectItemM {
        width: 49px;
        height: 24px;
        line-height: 24px;
        background-color: rgba(23, 126, 242, 0.1);
        color: #26e1eb;
        padding-left: 5px;
        border-radius: 3px;
        display: flex;
        position: relative;
        padding: 0 6px;
        .streetM {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .arrowDown {
        position: absolute;
        right: 12px;
        color: #26e1eb;
        cursor: pointer;
      }
    }
  }
  .leftBOX:hover .bottomBox {
    display: block;
  }
  .bottomBox {
    display: none;
    transform: translate(0, 5px);
    z-index: 999;
    background-image: url('@/assets/overall/矩形 263@1x (2.png');
    background-repeat: no-repeat;
    padding: 10px;
    color: #5de1d4;
    box-sizing: border-box;
    width: 710px;
    height: 213px;
    font-weight: 500;
    overflow-y: auto;
    .streetItem {
      line-height: 26px;
      height: 26px;
      padding-right: 9px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      .rightBox {
        padding-right: 10px;
        padding-left: 10px;
        flex: 1;
        display: flex;
        height: 26px;
        justify-content: space-between;
        opacity: 0.6;
        .name {
          width: 580px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .streetItem:last-child {
        margin: 0;
      }
      .streetItemChecked {
        background-color: rgba(23, 126, 242, 0.3);
        color: #26e1eb;
        font-weight: bold;
        opacity: 1 !important;
      }
    }
  }
}
.chuangtiStyle {
  width: 224px;
  height: 31px;
  // background-image: url('@/assets/rentMoreFactory/矩形 28287@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  box-sizing: border-box;
  line-height: 31px;
  display: none;
  .chuangtiTop {
    display: flex;
    .compayName {
      line-height: 31px;
      height: 31px;
      width: 224px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-family: 思源黑体;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      color: #ffffff;
      // margin-right: 15px;
    }
  }
}
.imgCursor {
  cursor: pointer;
}
</style>
